<!--
* @desc 添加页面
* @Author: bitqiang<bitqiang@outlook.net>
* @date: 2018/7/11 7:37
-->

<template>
  <div style="border-top:1px solid #808080">

    <div v-for="item in sport" :key="item.name" class="item" v-if="item.name === '项目'" @click="modelHandler('项目')">
      <span>{{item.name}}</span>
      <span>
            <span class="value">{{item.value}}</span>
        </span>
    </div>

    <picker v-for="item in sport" :key="item.name" @click="InitializationValue(item.name)" @change="bindPickerChange"
      :value="value" :range="range" mode='multiSelector' v-if="item.name !== '项目' && item.name !== '次数'">
      <div class="item">
        <span>{{item.name}}</span>
        <span class="value">
            <span class="number">{{item.value}}</span>
            <span v-if="item.name !== '项目' && item.name !== '次数'">s</span>
            <span v-if="item.name === '次数'">次</span>
        </span>
      </div>
    </picker>

    <div v-for="item in sport" :key="item.name" class="item" v-if="item.name === '次数'" @click="modelHandler">
      <span>{{item.name}}</span>
      <span>
            <span class="value">{{item.value}}</span>
        </span>
    </div>

    <modal :hidden="modalTempTitle" confirm-text="提交" cancel-text="取消" @cancel="modal = true" @confirm="confirmTitle">
      <input type='text' placeholder="请输入项目名字" v-model="tempTitle" auto-focus/>
    </modal>

    <modal :hidden="modalTempFrequency" confirm-text="提交" cancel-text="取消" @cancel="modalTempFrequency = true" @confirm="confirmFrequency">
      <input type='number' placeholder="请输入运动次数" v-model="tempFrequency" auto-focus/>
    </modal>

    <button type="primary" class="button" @click="complete">完成</button>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  export default {
    name: 'add-item',
    data () {
      return {
        sport: [
          {
            name: '准备',
            value: '0',
            originalValue: [0, 0, 0]
          },
          {
            name: '休息',
            value: '0',
            originalValue: [1, 0, 0]
          },
          {
            name: '运动',
            value: '0',
            originalValue: [2, 0, 0]
          },
          {
            name: '次数',
            value: 1
          },
          {
            name: '项目',
            value: 'Tabata'
          }
        ],
        range: [
          ['准备', '休息', '运动'],
          [3],
          [1]
        ],
        value: [1, 1, 1],
        modalTempTitle: true,
        modalTempFrequency: true,
        tempTitle: '',
        tempFrequency: 1
      }
    },
    props: {},
    mixins: [],
    computed: {
      ...mapState({
        project: state => state.project
      })
    },
    watch: {
    },
    methods: {
      confirmTitle () {
        this.sport[4].value = this.tempTitle
        this.modalTempTitle = true
      },
      confirmFrequency () {
        this.sport[3].value = this.tempFrequency
        this.modalTempFrequency = true
      },
      modelHandler (name) {
        if (name === '项目') {
          this.tempTitle = this.sport[4].value
          this.modalTempTitle = false
        } else {
          this.tempFrequency = this.sport[3].value
          this.modalTempFrequency = false
        }
      },
      InitializationValue (name) {
        this.sport.forEach(item => {
          if (item.name === name) {
            this.value = item.originalValue
          }
        })
      },
      bindPickerChange (e) {
        let value = e.target.value
        switch (value[0]) {
          case 0:
            this.sport[0].value = this.formatTime(value)
            this.sport[0].originalValue = value
            break
          case 1:
            this.sport[1].value = this.formatTime(value)
            this.sport[1].originalValue = value
            break
          case 2:
            this.sport[2].value = this.formatTime(value)
            this.sport[2].originalValue = value
            break
          case 3:
            let result = Number(value[1]) === 0 ? value[2] : `${(value[1])}${(value[2])}`
            this.sport[3].value = result
            this.sport[3].originalValue = value
            break
        }
      },
      formatTime (time) {
        let min = time[1]
        let second = time[2]
        if (min === 0) {
          return second
        } else {
          return `${min}min ${second}`
        }
      },
      complete () {
        const time = {
          readyTime: this.sport[0].originalValue, // 准备时间
          restTime: this.sport[1].originalValue, // 休息时间
          exerciseTime: this.sport[2].originalValue, // 运动时间
          movement: this.sport[3].value // 运动次数
        }

        // 未设置运动时间提醒用户
        if (time.exerciseTime[1] === 0 && time.exerciseTime[2] === 0) {
          wx.showToast({
            title: '尚未设置运动时间',
            icon: 'none',
            duration: 1000
          })
          return
        }

        let min = time.readyTime[1] + time.restTime[1] * Math.max((time.movement - 1), 0) + time.exerciseTime[1] * Math.max(time.movement, 1)
        let second = time.readyTime[2] + time.restTime[2] * Math.max((time.movement - 1), 0) + time.exerciseTime[2] * Math.max(time.movement, 1)
        let totleMin = min + Math.floor(second / 60)
        this.$store.commit('getStore')
        let totleTime

        if (second % 60 !== 0 && totleMin !== 0) {
          totleTime = `${totleMin} min ${second % 60} s`
        } else if (second % 60 === 0 && totleMin !== 0) {
          totleTime = `${totleMin} min`
        } else {
          totleTime = `${second % 60} s`
        }
        let index = this.$store.state.project.findIndex(item => item.sport[4].value === this.sport[4].value)

        if (index !== -1) {
          wx.showModal({
            title: '项目名重复',
            content: '是否覆盖同名项目？',
            success: res => {
              if (res.confirm) {
                this.$store.dispatch('addItem', {
                  sport: this.sport,
                  totleMin: totleMin,
                  totleTime,
                  index
                })
                this.$store.commit('saveStore')
                this.$router.push('/pages/index')
              } else if (res.cancel) {
                console.log('用户点击取消')
              }
            }
          })
        } else {
          this.$store.dispatch('addItem', {
            sport: this.sport,
            totleMin: totleMin,
            totleTime,
            index
          })
          this.$store.commit('saveStore')
          this.$router.push('/pages/index')
        }
      }
    },
    // 各生命周期执行函数
    created () {
      let timer = new Array(60).fill(1).map((item, index) => {
        if (index < 10) return `0${index}`
        return `${index}`
      })

      this.range = this.range.map((item, index) => {
        if (index !== 0) {
          return timer
        } else {
          return item
        }
      })
    },
    beforeMount () {
      let index = this.$route.query.index
      if (index) this.sport = JSON.parse(JSON.stringify(this.project[index].sport))
    },
    mounted () {
    },
    components: {}
  }
</script>

<style>
  page {
    display: block;
    min-height: 100%;
    background-color: #000000;
    color: white;
  }

  .item {
    display: flex;
    justify-content: space-between;
    padding-left: 30rpx;
    padding-right: 30rpx;
    margin-top: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #808080;
  }

  .value {
    color: #00AF30;
    padding-right: 10rpx;
  }
  .value .number{
    padding: 16rpx;
  }
  .button{
    margin-top: 35rpx;
  }
</style>
